<template>
  <div class="subitem">
    <div class="m-header">
      <div>项目信息管理></div>
      <div>子项目信息管理</div>
      <span class="bq-back" @click="back">＜返回</span>
    </div>
    <!-- 父项目信息 -->
    <div class="parent-detail">
      <div class="parent-name">{{ parentmsg.parentProjectName }}</div>
      <div class="parent-msg">
        <div class="parent-szd">
          <span class="p-title">所在地:</span>
          <span>{{ parentmsg.provinces }}{{ parentmsg.city
            }}{{ parentmsg.district }} {{ parentmsg.town }}
          </span>
        </div>
        <div class="parent-fzr">
          <span class="p-title">项目公司负责人:</span>
          <span>{{ parentmsg.projHead }}</span>
        </div>
        <div class="parent-cbr">
          <span class="p-title">建设公司负责人:</span>
          <span>{{ parentmsg.constructionHead }}</span>
        </div>

        <div class="parent-user">
          <span class="p-title">创建人:</span>
          <span>{{ parentmsg.creator }}</span>
        </div>
        <div class="parent-time">
          <span class="p-title">创建时间:</span>
          <span>{{ parentmsg.createTime }}</span>
        </div>
        <div class="parent-alteruser">
          <span class="p-title">修改人:</span>
          <span>{{ parentmsg.modifier }}</span>
        </div>
        <div class="parent-altertime">
          <span class="p-title">修改时间:</span>
          <span>{{ parentmsg.upTime }}</span>
        </div>
      </div>
    </div>
    <div class="list-box">
      <div class="bq-all">
        <span class="xian"></span>
        项目信息
        <button class="m-add" @click="addSubProj">新增子项目</button>
      </div>
      <div class="s-serch">
        <div class="select">
          <span>项目名称：</span>
          <!-- <input type="text" placeholder="子项目名称" /> -->
          <el-input v-model="childname" placeholder="子项目名称"></el-input>
        </div>
        <div class="select">
          <span>创建时间：</span>
          <el-date-picker
            v-model="timevalue"
            type="datetimerange"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
          ></el-date-picker>
        </div>
        <div class="sousuo" @click="childsearch">
          <svg title="搜索 " class="iconsousuo ic" aria-hidden="true">
            <use xlink:href="#iconsousuo" />
          </svg>
        </div>
      </div>
      <div class="ul-box">
        <div class="top">
          <span class="li">子项目名称</span>
          <span class="li">项目公司负责人</span>
          <span class="li">建设公司负责人</span>
          <span class="li">所在镇</span>
          <span class="li">创建时间</span>
          <span class="li">修改时间</span>
          <span class="li">修改人</span>
          <span class="li">操作</span>
        </div>
        <div id="list">
          <div class="ul" v-for="item in childlist" :key="item.id">
            <span class="li">{{ item.subProjName }}</span>
            <span class="li">{{ item.projHead }}</span>
            <span class="li">{{ item.constructionHead }}</span>
            <span class="li">{{ item.townName }}</span>
            <span class="li">{{ item.createTime }}</span>
            <span class="li">{{ item.upTime }}</span>
            <span class="li">{{ item.modifier }}</span>
            <span class="li">
              <img src="../../assets/images/fill-view.png" @click="subdetail(item.id)" />
              <img src="../../assets/images/edit.png" alt @click="subalter(item.id)" />
              <img src="../../assets/images/remove.png" alt @click="subdel(item.id)" />
            </span>
          </div>
          <div class="s-tip" v-if="childlist.length==0">暂无数据</div>
        </div>
      </div>
      <div class="s-page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="childpage.pageNum"
          :page-sizes="[8]"
          :page-size="childpage.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagetotal"
        ></el-pagination>
      </div>
    </div>
    <!-- 新增弹出框 -->
    <div class="alterbox" v-show="addsub">
      <div class="mainalter-box" style="height:300px">
        <div class="mainalter-box-body">
          <div class="mainalter-box-bodybox">
            <div class="bq-all">
              <span class="xian"></span>
              子项目信息新增
              <div class="cha" @click="subCancel"></div>
            </div>
            <div class="mainalter-box-inputbox">
              <span>
                <i>*</i>项目名称
              </span>
              <input type="text" v-model="addchildproject.subProjName" placeholder="请输入" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>
                <i>*</i>项目公司负责人
              </span>
              <input type="text" v-model="addchildproject.projHead" placeholder="请输入" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>
                <i>*</i>建设公司负责人
              </span>
              <input type="text" v-model="addchildproject.constructionHead" placeholder="请输入" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>
                <i>*</i>所在城镇
              </span>
              <input type="text" v-model="addchildproject.townName" placeholder="xx镇" />
            </div>
            <!-- <div class="mainalter-box-inputbox">
              <span>创建人</span>
              <input type="text" placeholder="请输入" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>创建时间</span>
              <input type="text" placeholder="请输入" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>更新人</span>
              <input type="text" placeholder="请输入" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>更新时间</span>
              <input type="text" placeholder="请输入" />
            </div>-->
          </div>
        </div>
        <div class="mainalter-box-button">
          <button class="bc" @click="subadd">确定</button>
          <button class="tj" @click="subCancel">取消</button>
        </div>
      </div>
    </div>
    <!-- 预览弹出层 -->
    <div class="alterbox" v-show="detailsub">
      <div class="mainalter-box">
        <div class="mainalter-box-body">
          <div class="mainalter-box-bodybox">
            <div class="bq-all">
              <span class="xian"></span>
              项目信息预览
              <div class="cha" @click="subCancel"></div>
            </div>
            <div class="mainalter-box-inputbox">
              <span>项目名称</span>
              <input
                type="text"
                v-model="subprojdetail.subProjName"
                readonly="readOnly"
                placeholder
              />
            </div>
            <div class="mainalter-box-inputbox">
              <span>项目公司负责人</span>
              <input type="text" v-model="subprojdetail.projHead" readonly="readOnly" placeholder />
            </div>
            <div class="mainalter-box-inputbox">
              <span>建设公司负责人</span>
              <input
                type="text"
                v-model="subprojdetail.constructionHead"
                readonly="readOnly"
                placeholder
              />
            </div>
            <div class="mainalter-box-inputbox">
              <span>所在城镇</span>
              <input type="text" v-model="subprojdetail.townName" readonly="readOnly" placeholder />
            </div>
            <div class="mainalter-box-inputbox">
              <span>创建人</span>
              <input type="text" v-model="subprojdetail.creator" readonly="readOnly" placeholder />
            </div>
            <div class="mainalter-box-inputbox">
              <span>创建时间</span>
              <input type="text" v-model="subprojdetail.createTime" readonly="readOnly" placeholder />
            </div>
            <div class="mainalter-box-inputbox">
              <span>更新人</span>
              <input type="text" v-model="subprojdetail.modifier" readonly="readOnly" placeholder />
            </div>
            <div class="mainalter-box-inputbox">
              <span>更新时间</span>
              <input type="text" v-model="subprojdetail.upTime" readonly="readOnly" placeholder="无" />
            </div>
          </div>
        </div>
        <!-- <div class="mainalter-box-button">
          <button class="bc">确定</button>
          <button class="tj" @click="subCancel">取消</button>
        </div>-->
      </div>
    </div>
    <!-- 修改弹出层 -->
    <div class="alterbox" v-show="altersub">
      <div class="mainalter-box" style="height:300px">
        <div class="mainalter-box-body">
          <div class="mainalter-box-bodybox">
            <div class="bq-all">
              <span class="xian"></span>
              项目信息修改
              <div class="cha" @click="subCancel"></div>
            </div>
            <div class="mainalter-box-inputbox">
              <span>
                <i>*</i>项目名称
              </span>
              <input type="text" v-model="altersubproj.subProjName" placeholder="请输入" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>
                <i>*</i>项目公司负责人
              </span>
              <input type="text" v-model="altersubproj.projHead" placeholder="请输入" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>
                <i>*</i>建设公司负责人
              </span>
              <input type="text" v-model="altersubproj.constructionHead" placeholder="请输入" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>
                <i>*</i>所在城镇
              </span>
              <input type="text" v-model="altersubproj.townName" placeholder="xx镇" />
            </div>
            <!-- <div class="mainalter-box-inputbox">
              <span>创建人</span>
              <input type="text" placeholder="请输入" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>创建时间</span>
              <input type="text" placeholder="请输入" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>更新人</span>
              <input type="text" placeholder="请输入" />
            </div>
            <div class="mainalter-box-inputbox">
              <span>更新时间</span>
              <input type="text" placeholder="请输入" />
            </div>-->
          </div>
        </div>
        <div class="mainalter-box-button">
          <button class="bc" @click="updatesure">确定</button>
          <button class="tj" @click="subCancel">取消</button>
        </div>
      </div>
    </div>
    <!-- 删除弹出框 -->
    <div class="delbox" v-show="delSub">
      <div class="mdel">
        <div class="bq-all">
          <span class="xian"></span>
          项目信息删除
          <div class="cha" @click="subCancel"></div>
        </div>
        <div class="mdel-body">你确定要删除该项目的全部信息吗?</div>
        <div class="mdel-button">
          <button class="bc" @click="delsure">确定</button>
          <button class="tj" @click="subCancel">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
@import "../../style/project/subitem.scss";
</style>
<script>
import {
  projectid,
  childproj,
  addchildproj,
  childprojid,
  delchildproj,
  updatechildproj
} from "../../service/project";
export default {
  data() {
    return {
      //新增
      addsub: false,
      //修改
      altersub: false,
      //删除
      delSub: false,
      delid: "",
      //预览
      detailsub: false,
      //时间
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      timevalue: "",
      //父项目信息
      parentmsg: {},
      childpage: {
        endTime: "", //结束时间
        startTime: "", //开始时间
        id: "", //父项目id
        pageNum: 1, //当前页数
        pageSize: 8, //查询条数
        subProjName: "" //子项目名称
      },
      pagetotal: 4, //总数
      //子项目列表
      childlist: [],
      //搜索
      childname: "", //子项目名称
      // 新增
      addchildproject: {
        constructionHead: "", //承包负责人
        parentProjId: this.$route.query.id, //父项目id
        projHead: "", //项目方负责人
        townName: "", //所在城镇
        subProjName: ""
      },
      //预览子项目
      subprojdetail: {
        constructionHead: "", //承包负责人
        creator: "",
        projHead: "", //项目方负责人
        townName: "", //所在城镇
        subProjName: "",
        createTime: "",
        modifier: "",
        upTime: ""
      },
      //修改
      altersubproj: {
        constructionHead: "", //承包负责人
        projHead: "", //项目方负责人
        townName: "", //所在城镇
        subProjName: "",
        subProjectId: ""
      }
    };
  },
  created() {
    //父项目信息
    const id = this.$route.query.id;
    projectid(id).then(res => {
      // window.console.log(res.data.obj);
      this.parentmsg = res.data.obj;
    });
    //子项目信息
    this.childpage.id = id;
    childproj(this.childpage).then(res => {
      // window.console.log("子项目信息", this.childlist);
      this.pagetotal = res.data.obj.total;
      this.childlist = res.data.obj.rows;
    });
  },
  methods: {
    //返回
    back() {
      this.$router.push({ path: "/mainItem" });
    },
    //新增
    addSubProj() {
      this.addsub = true;
    },
    subadd() {
      if (this.addchildproject.subProjName == "") {
        this.$message.error("请输入项目名称");
      } else if (this.addchildproject.projHead == "") {
        this.$message.error("请输入项目公司负责人");
      } else if (this.addchildproject.constructionHead == "") {
        this.$message.error("请输入建设公司负责人");
      } else if (this.addchildproject.townName == "") {
        this.$message.error("项目所在城镇不能为空");
      } else {
        addchildproj(this.addchildproject).then(res => {
          // window.console.log(res);
          if (res.data.status == 200) {
            this.subCancel();
            this.$message({
              message: "新增成功",
              type: "success"
            });
            childproj(this.childpage).then(res => {
              // window.console.log("子项目信息",res);
              this.pagetotal = res.data.obj.total;
              this.childlist = res.data.obj.rows;
            });
            this.addchildproject = {
              constructionHead: "", //承包负责人
              parentProjId: this.$route.query.id, //父项目id
              projHead: "", //项目方负责人
              townName: "", //所在城镇
              subProjName: ""
            };
          } else {
            this.$message.error(res.data.msg);
          }
        });
      }
    },
    // 预览
    subdetail(id) {
      this.detailsub = true;
      // window.console.log(id);
      childprojid(id).then(res => {
        this.subprojdetail = res.data.obj;
        // window.console.log(res);
      });
    },
    //修改
    subalter(id) {
      this.altersub = true;
      childprojid(id).then(res => {
        this.altersubproj = res.data.obj;
        // window.console.log(res);
      });
      this.delid = id;
    },
    updatesure() {
      if (this.altersubproj.subProjName == "") {
        this.$message.error("请输入项目名称");
      } else if (this.altersubproj.projHead == "") {
        this.$message.error("请输入项目公司负责人");
      } else if (this.altersubproj.constructionHead == "") {
        this.$message.error("请输入建设公司负责人");
      } else if (this.altersubproj.townName == "") {
        this.$message.error("项目所在城镇不能为空");
      } else {
        updatechildproj(this.altersubproj).then(res => {
          // window.console.log(res);
          if (res.data.status == 200) {
            this.subCancel();
            this.$message({
              message: "修改成功",
              type: "success"
            });
            childproj(this.childpage).then(res => {
              // window.console.log("子项目信息",res);
              this.pagetotal = res.data.obj.total;
              this.childlist = res.data.obj.rows;
            });
          } else {
            this.$message.error(res.data.msg);
          }
        });
      }
    },
    //删除
    subdel(id) {
      this.delSub = true;
      this.delid = id;
      // window.console.log(this.delid);
    },
    delsure() {
      delchildproj(this.delid).then(res => {
        if (res.data.status == 200) {
          this.subCancel();

          // window.console.log(res)

          childproj(this.childpage).then(res => {
            this.pagetotal = res.data.obj.total;
            // this.childlist = res.data.obj.rows;

            //  childproj(this.childpage).then(res => {
            //     // window.console.log("子项目信息",res);
            //     this.pagetotal = res.data.obj.total;
            //     this.childlist = res.data.obj.rows;
            //   });
            if (this.pagetotal % 8 == 1) {
              this.childpage.pageNum--;
              // window.console.log(this.childpage.pageNum);
              childproj(this.childpage).then(res => {
                // window.console.log("子项目信息",res);
                this.pagetotal = res.data.obj.total;
                this.childlist = res.data.obj.rows;
              });
              // this.childlist = res.data.obj.rows;
            } else {
              childproj(this.childpage).then(res => {
                // window.console.log("子项目信息",res);
                this.pagetotal = res.data.obj.total;
                this.childlist = res.data.obj.rows;
              });
            }
          });
          this.$message({
            message: "删除成功",
            type: "success"
          });
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    // 取消
    subCancel() {
      this.addsub = false;
      this.delSub = false;
      this.altersub = false;
      this.detailsub = false;
      this.addchildproject = {
        constructionHead: "", //承包负责人
        parentProjId: this.$route.query.id, //父项目id
        projHead: "", //项目方负责人
        townName: "", //所在城镇
        subProjName: ""
      };
    },
    //搜索
    childsearch() {
      // window.console.log("提交",this.timevalue==0);
      this.childpage.subProjName = this.childname;
      if (this.timevalue != "" && this.timevalue != null) {
        this.childpage.startTime = this.timevalue[0];
        this.childpage.endTime = this.timevalue[1];
        //  window.console.log("提交", this.childpage.startTime);
        //   window.console.log("提交", this.childpage.endTime);
        childproj(this.childpage).then(res => {
          // window.console.log("子项目信息",res);
          this.pagetotal = res.data.obj.total;
          this.childlist = res.data.obj.rows;
          this.childpage.pageNum = 1;
        });
      } else {
        // window.console.log("提交", this.timevalue);
        this.childpage.pageNum = 1;
        childproj(this.childpage).then(res => {
          // window.console.log("子项目信息",res);

          this.pagetotal = res.data.obj.total;
          this.childlist = res.data.obj.rows;
        });
      }
    },
    //分页
    handleSizeChange(value) {
      this.childpage.pageSize = value;
      const parms = Object.assign({}, this.childpage);
      childproj(parms).then(res => {
        // window.console.log("子项目信息",res);
        this.pagetotal = res.data.obj.total;
        this.childlist = res.data.obj.rows;
      });
    },
    handleCurrentChange(value) {
      this.childpage.pageNum = value;
      const parms = Object.assign({}, this.childpage);
      childproj(parms).then(res => {
        // window.console.log("子项目信息",res);
        this.pagetotal = res.data.obj.total;
        this.childlist = res.data.obj.rows;
      });
    }
  }
};
</script>
